<template>
  <div class="wrap">

    <div class="header">
      <div class="search-line">
        <el-select v-model="queryParams.containerStatus" clearable class="mgr10" @change="changeOption">
          <el-option label="货柜状态" value=""></el-option>
          <el-option
            v-for="item in allContainerStatusList"
            :key="item.status"
            :label="item.name"
            :value="item.status"
          >
          </el-option>
        </el-select>
        <el-select v-model="queryParams.transferType" clearable class="mgr10" @change="changeOption">
          <el-option label="收货渠道" value=""></el-option>
          <el-option
            v-for="item in transferTypeList"
            :key="item.transferType"
            :label="'墨西哥' + item.typeName"
            :value="item.transferType"
          >
          </el-option>
        </el-select>
        <el-input v-model="queryParams.keyword" style="width: 200px" placeholder="订舱号/货柜编号"></el-input>
        <el-button type="primary" @click="changeOption">搜索</el-button>
        <export-button :func="func" :query-params="queryParams"  :getTotal="tableData.length"></export-button>
        <export-container-cost-btn style="display: inline-block" @changeData="getData"></export-container-cost-btn>
      </div>

      <div class="search-line">
        <el-select v-model="queryParams.timeField" class="mgr10" @change="changeOption">
          <el-option label="制单时间" value="create_time"></el-option>
          <el-option label="装柜时间" value="install_date"></el-option>
        </el-select>
        <diy-date style="display: inline-block" :set-day-type="30" v-model="queryParams.times" @change="changeOption" ></diy-date>
      </div>

      <div class="search-line">
        <el-tabs v-model="queryParams.costStatus" @tab-click="changeOption">
          <el-tab-pane :label="item.name + `(${item.num})`" :name="item.status" v-for="item in tabNumber" :key="item.status"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="content">
      <div class="table" v-loading="loading">
        <container-data-table :table-data="tableData" @changeData="getData" :agent-list="agentList" :api-times="apiTimes"></container-data-table>
      </div>
    </div>
  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import ShipmentStatusMixin from "@/views/FLData/mixin/ShipmentStatusMixin";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import EmployeeMixin from "@/views/FLData/mixin/EmployeeMixin";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import {getFinanceContainerList, getFinanceShipmentList} from "@/api/finance";
import ShipmentDataTable from "@/views/FLData/components/ShipmentDataTable.vue";
import ContainerDataTable from "@/views/FLData/components/ContainerDataTable.vue";
import ContainerStatusMixin from "@/views/FLData/mixin/ContainerStatusMixin";
import ExportButton from "@/views/order/components/ExportButton.vue";
import ExportContainerCostBtn from "@/views/FLData/components/ExportContainerCostBtn.vue";

export default {
  name: "containerData",
  mixins: [ContainerStatusMixin, shippingPlanDataMixin, EmployeeMixin],
  components: {ExportContainerCostBtn, ExportButton, ContainerDataTable, DiyDate},
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        containerStatus: '',
        transferType: '',
        employeeId: '',
        keyword: '',
        timeField: 'create_time',
        times: [],
        costStatus: 'all',
      },
      loading: false,
      tableData: [],
      agentList: [], // 表格中动态的代理
      apiTimes: 0, // 表格需要动态渲染 所以每一次都要刷新一次
      tabNumber: [
        {status: 'untreated', name: '未处理', num: 0},
        {status: 'wait_settle', name: '待结算', num: 0},
        {status: 'settling', name: '结算中', num: 0},
        {status: 'settled', name: '已结算', num: 0},
        {status: 'all', name: '全部', num: 0},
      ],
      func: getFinanceContainerList,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      this.loading = true
      getFinanceContainerList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.apiTimes++
          this.agentList = res.info.agentList
          res.info.tabNumber.forEach(item=>{
            this.tabNumber.some(item2=>{
              if(item2.status === item.status){
                item2.num = item.num
                return true
              }
            })
          })
        })
    },
    changeOption() {
      this.queryParams.page = 1;
      this.getData();
    }
  },
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 20px;
  .header{
    display: flex;
    flex-direction: column;
    .search-line{
      margin-bottom: 10px;
    }
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
